<template>
  <div class="list-c">
    <div class="from">
      <div class="row">
        <div class="col">
          项目:<el-select v-model="value1" clearable placeholder="请选择">
            <el-option v-for="item in options" :key="item" :label="item" :value="item" />
          </el-select>
        </div>
        <div class="col">
          部署:<el-select v-model="value2" clearable placeholder="请选择">
            <el-option v-for="item in deployOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </div>
      <div class="row">
        <div class="col">
          类型:<el-select v-model="value3" clearable placeholder="请选择">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="col">名字:<el-input v-model="value4" placeholder="请输入密码" /></div>
      </div>
      <el-button @click="getList">查询</el-button>
    </div>
    <el-button @click="getList">添加用例</el-button>
    <el-table :data="tableData.items" style="width: 100%">
      <el-table-column label="序号" width="70px">
        <template slot-scope="scope"> {{ scope.$index+1 }}</template>
      </el-table-column>
      <el-table-column prop="id" label="id" width="180" />
      <el-table-column prop="case_name" label="名称" width="180" />
      <el-table-column prop="case_type" label="类型">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.case_type == 1 ? "UI自动化" : "接口自动化" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="case_value" label="地址" />
      <el-table-column prop="is_deploy" label="是否部署">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.is_deploy == 0 ? "未部署" : "已部署" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span
            style="margin-left: 10px"
          ><el-button @click="tableRowEdit(scope.row)">编辑</el-button><el-button v-if="scope.row.is_deploy == 0" @click="tableRowDeploy(scope.row)">部署</el-button><el-button v-if="scope.row.is_deploy != 0" disabled @click="getList">部署</el-button></span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :page-sizes="[10, 20, 30]"
      :page-size="10"
      layout="sizes, prev, pager, next"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >>
    </el-pagination>
  </div>
</template>

<script>
import { Message } from 'element-ui'
export default {
  data() {
    return {
      // 选择框选项
      options: [], // str[]
      deployOptions: [
        // pr{vale:str,label:str}[]
        // { value: 2, label: "" },
        { value: 1, label: '已部署' },
        { value: 0, label: '未部署' }
      ],
      typeOptions: [
        { value: 1, label: 'UI自动化' },
        { value: 2, label: '接口自动化' }
      ],
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      page_per: 10,
      page_num: 1,
      tableData: {
        total: 0,
        items: [
          {
            case_name: '',
            case_type: '',
            case_value: '',
            create_time: '',
            id: '',
            is_deploy: '',
            group_name: '',
            project_name: '',
            submit_uid: '',
            update_time: '',
            update_uid: ''
          }
        ]
      }
    }
  },
  created() {
    this.getList()
    this.getProjectName()
  },
  methods: {
    getList() {
      const { value1, value2, value3, value4, page_per, page_num } = this._data
      this.$axios
        .post('/api/case_library/get_case_list/case_querys', {
          page_per: page_per,
          page_num: page_num,
          project_name: value1 || '',
          is_deploy: value2 || '',
          case_type: value3 || '',
          case_name: value4 || ''
        })
        .then(res => {
          const { data } = res
          this._data.tableData = data
        })
        .catch(err => {
          Message.error(err.msg || err.message || err.value)
        })
    },
    getProjectName() {
      this.$axios
        .get('/api/case_library/get_project_name_list')
        .then(res => {
          const { data } = res
          this._data.options = data
        })
        .catch(err => {
          Message.error(err.msg || err.message || err.value)
        })
    },
    handleSizeChange(val) {
      this._data.page_per = val
      this.getList()
    },
    handleCurrentChange(val) {
      this._data.page_num = val
      this.getList()
    },
    tableRowEdit(row) {
      // TODO balabala...
      console.log(row)
    },
    tableRowDeploy(row) {
      // TODO balabala...
      console.log(row)
    }
  }
}
</script>

<style>
.from {
  min-height: 120px;
  padding: 16px;
  margin: 24px;
  border: solid 0.5px slategray;
  border-radius: 4px;
}
.list-c {
  width: 100%;
  flex: 1 1;
}
.row {
  display: flex;
  height: 48px;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}
.row > .col {
  display: flex;
  min-width: 200px;
  align-items: center;
}
.el-input {
  width: unset;
}
</style>
